<template>
  <view class="relative">
    <u-navbar
        title="巡检历史"
        :background="{ backgroundColor:'#9CE0FF'}"
        :border-bottom="false"
        title-color="#000"
        title-size="37"
    />
    <view class="sticky" id="container" :style="{top:`${top}px`}">
      <date-picker @changeTime="getTime" />
    </view>
    <view
        class="fz-32 lh-145 m-lr-20 p-lr-20 border-bottom-CCCCCC"
        v-for="(item) in historyList"
        :key="item.workOrderId"
        @tap="toCheckItemDetail(item.workOrderId, item.workOrderDeviceId)"
    >
      <text>{{ item.endTime || '-' }}</text>
      <view class="f-r">
        <text
            v-for="(resultListItem,resultListIndex) in resultList(item)"
            :class="[resultListItem.type == 'abnormal' ? 'color-FF6262' : 'color-19BE6B']"
            :key="resultListIndex">
          {{ resultListItem.value }}
        </text>
      </view>
    </view>
    <empty-icon v-if="!historyList.length"></empty-icon>
  </view>
</template>

<script>
import DatePicker from "@/components/DatePicker/DatePicker";
import getNavBarHeight from "@/mixins/getNavBarHeight";
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import dayjs from '@/libs/dayjs.min.js'
import { getListFinishWorkOrder } from "@/api/equipment/equipment"
export default {
  name: "checked-history",
  components: {EmptyIcon, DatePicker},
  mixins:[getNavBarHeight],
  data() {
    return {
      historyList:[],
      deviceId: '',
      startTime: '',
      endTime: '',
    }
  },
  onLoad(option) {
    this.deviceId = option.deviceId
    this.initData()
  },
  methods:{
    resultList(item){
      let abnormalStandardNameArray = item.abnormalStandardName?.split(',').map(item => {
        return {value:item, type: 'abnormal'}
      }) || []

      let normalStandardNameArray = item.normalStandardName?.split(',').map(item => {
        return {value:item, type: 'normal'}
      }) || []
      let resultList = [...abnormalStandardNameArray, ...normalStandardNameArray]
      resultList = resultList.map((item, index) => {
        if(index + 1 < resultList.length){
          return {...item, value: item.value + ','}
        }
        return  item
      })
      if(resultList.length > 2 && resultList[2].type === 'abnormal'){
        resultList = [resultList[0], resultList[1], {value: '...', type: 'abnormal'}]
      }
      if(resultList.length > 2 && resultList[2].type === 'normal'){
        resultList = [resultList[0], resultList[1], {value: '...', type: 'normal'}]
      }
      return resultList
    },
    initData(param) {
      const params = param || { deviceId: this.deviceId }
      getListFinishWorkOrder(params).then(res => {
        this.historyList = res.data
      })
    },
    toCheckItemDetail(workOrderId,workOrderDeviceId){
      if(workOrderId && workOrderDeviceId) {
        this.$tab.navigateTo(`/pages/work/check-item-detail?workOrderId=${workOrderId}&workOrderDeviceId=${workOrderDeviceId}&deviceId=${this.deviceId}&fromCheckedHistory=1`)
      }else {
        uni.showToast({title: '数据错误,跳转失败', icon: 'error'})
      }
    },
    getTime(e) {
      this.startTime = e.startTime ? dayjs(e.startTime).format('YYYY-MM-DD HH:mm:ss') : '';
      this.endTime = e.endTime ? dayjs(e.endTime).format('YYYY-MM-DD HH:mm:ss') : '';
      const param = { deviceId: this.deviceId, searchStartDate: this.startTime, searchEndDate: this.endTime }
      this.initData(param)
    },
  }
}
</script>
<style lang="scss">
page{
  background-color: #FFFFFF;
}
</style>
<style lang="scss" scoped>
</style>
